<template>
  <div id="app">
    <el-container>
      <el-aside
        width="14.5%"
        height="100%"
        style="background-color: rgb(238, 241, 246); min-width: 285px"
        class="siderBar"
      >
        <div class="userInfo">
          <div class="userAvatar">
            <img :src="user.userAvater" alt="用户头像" />
          </div>
          <div class="userDetail">
            <p class="userName">{{ user.userName }}</p>
            <p class="userHotel">{{ user.userHotel }}</p>
            <div class="nowTime">
              <p class="nowDate">
                {{ nowDate[0] }}年{{ nowDate[1] }}月{{ nowDate[2] }}日
              </p>
              <p class="actTime">{{ time }}</p>
            </div>
          </div>
        </div>
        <el-menu
          active-text-color="#409EFF"
          default-active="1"
          :default-openeds="['6']"
          style="height: auto"
          router="true"
        >
          <router-link to="/getorder">Go to Home</router-link>
          <router-link to="/home">Go to Home</router-link>
          <router-link to="/updata">Go to Home</router-link>
          <el-menu-item index="1" route="/home">
            <i class="el-icon-user-solid"></i>用户中心
          </el-menu-item>
          <el-menu-item index="2" route="/getorder">
            <i class="el-icon-tickets"></i>订单查看
          </el-menu-item>
          <el-menu-item index="3" route="/updata">
            <i class="el-icon-upload"></i>资料更新
          </el-menu-item>
          <el-menu-item index="4" route="/roommanage">
            <i class="el-icon-house"></i>入住管理
          </el-menu-item>
          <el-menu-item index="5">
            <i class="el-icon-s-finance"></i>余额提现
          </el-menu-item>

          <el-submenu index="6">
            <span slot="title" style="font-size: 17.85px">服务中心</span>
            <el-menu-item index="6-1">
              <i class="el-icon-phone"></i>维修上报
            </el-menu-item>
            <el-menu-item index="6-2">
              <i class="el-icon-s-platform"></i>技术支持
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header class="headNav" height="42px">
          <el-dropdown>
            <el-badge class="info" value="new">
              <el-button
                class="infoBtm"
                icon="el-icon-message"
                type="primary"
              ></el-button>
            </el-badge>
            <el-dropdown class="setting">
              <el-button type="primary" icon="el-icon-s-tools"
                ><i></i
              ></el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>登出</el-dropdown-item>
                <el-dropdown-item>修改</el-dropdown-item>
                <el-dropdown-item>退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-dropdown>
          <span>王小虎</span>
        </el-header>
        <!-- 展示界面 -->
        <el-main class="main"> 
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      user: {
        userName: "姓名",
        userHotel: "酒店名称",
        userAvater:
          "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
        userID: "",
      },
      date: new Date().toLocaleDateString(),
      time:
        new Date().getHours() +
        "时" +
        new Date().getMinutes() +
        "分" +
        new Date().getSeconds() +
        "秒",
    };
  },
  components: {
    
  },
  computed: {
    nowDate() {
      return this.date.split("/");
    },
  },
  created() {
    setInterval(() => {
      this.time =
        new Date().getHours() +
        "时" +
        new Date().getMinutes() +
        "分" +
        new Date().getSeconds() +
        "秒";
    }, 1000);
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 780px;
}
.info {
  margin-right: 25px;
}
.setting {
  margin-right: 20px;
  box-sizing: border-box;
}
.headNav {
  text-align: right;
  font-size: 12px;
  background-color: #409eff;
  position: relative;
  width: 100%;
}
.userInfo {
  display: flex;
  box-sizing: border-box;
  margin-top: 12px;
  height: auto;
  padding: 12.5px;
  padding: 10px;
}
.userAvatar {
  box-sizing: border-box;
  margin-left: 10px;
  width: 100px;
  height: 100px;
  padding-right: 20px;
}
.userAvatar img {
  height: auto;
  width: 100%;
  border-radius: 30px;
}
.nowTime {
  font-size: 60%;
  text-align: center;
}
.userDetail {
  text-align: center;
  box-sizing: border-box;
  margin-top: 14px;
}
.userName,
.userHotel {
  font-size: 80%;
  font-weight: bolder;
}
.userInfo p {
  padding: 0;
  margin: 0;
}

</style>
